<template>
  <u-popup :show="visible" @close="close" mode="bottom">
    <view class="withdrawalPopup">
      <view class="withdrawalPopup-header">
        {{ info.title || '' }}
        <image src="/static/叉号.png" mode="" @click="close()"></image>
      </view>
      <view class="withdrawalPopup-tx">
        金额：<text>{{ info.price }}</text>元
      </view>
      <view class="withdrawalPopup-t">支付方式</view>
      <view class="withdrawalPopup-list">
        <view class="withdrawalPopup-list-item" @click="setType(1)">
          <view class="withdrawalPopup-list-item-l">
            <image src="/static/wx.png" mode=""></image>
            微信
          </view>
          <image :src="type === 1 ? '/static/4.png' : '/static/2.png' " mode=""></image>
        </view>
        <view class="withdrawalPopup-list-item" @click="setType(2)">
          <view class="withdrawalPopup-list-item-l">
            <image src="/static/yh1.png" mode=""></image>
            积分支付(余额：￥{{ number }})
          </view>
          <image :src="type === 2 ? '/static/4.png' : '/static/2.png' " mode=""></image>
        </view>
      </view>
      <view class="form-btns" @click="submit">确定支付</view>
    </view>
  </u-popup>
</template>

<script>

export default {
  data() {
    return {
      visible: false,
      info: '',
      balance: '',
      type: 1, // 1微信 2积分支付
      number: 0
    }
  },
  created() {

  },
  methods: {

    show(e) {
      this.info = e
      uni.$u.http.post('getBalance').then(res => {
        this.number = res.data
        this.visible = true
      }).catch(error => {
        uni.showToast({
          title: '获取用户余额失败',
          icon: 'error',
          duration: 1000 // 提示框持续时间，单位为毫秒
        })
      })


    },
    close() {
      this.visible = false
    },
    setType(type) {
      this.type = type
    },
    isPositiveNumber(value) {
      // 检查是否是有效数字
      const number = parseFloat(value);
      // 使用正则表达式检查格式
      const regex = /^(?!0\d)\d*\.?\d+$/;
      return !isNaN(number) && number > 0 && regex.test(value);
    },
    submit() {

    }
  }
}
</script>

<style lang="scss" scoped>
.form-btns {

  margin: 0 auto;
  width: 100%;
  height: 80rpx;
  background: linear-gradient(271deg, #F6241F 0%, #FC684D 100%);
  border-radius: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: white;
  margin-top: 40rpx;

}

.withdrawalPopup {
  width: 672rpx;
  margin: 0 auto;
  padding-bottom: 50rpx;

  .withdrawalPopup-header {
    box-sizing: border-box;
    margin-bottom: 55rpx;
    padding: 47rpx 40rpx 0 0;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 34rpx;
    color: #292929;
    position: relative;

    image {
      width: 34rpx;
      height: 34rpx;
      position: absolute;
      top: 23rpx;
      right: 0;
    }

  }

  .withdrawalPopup-tx {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: orange;
    margin-bottom: 63rpx;
    text {
      color: #e4393c;
      font-size: 60rpx;
      font-weight: bold;
      margin-right: 10rpx;
    }
  }

  .withdrawalPopup-t {
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 34rpx;
    color: #292929;
    margin-bottom: 43rpx;
  }
}

.withdrawalPopup-input {
  width: 100%;
  padding-bottom: 18rpx;
  border-bottom: 1rpx solid #DFDFDF;
  display: flex;
  align-items: center;
  margin-bottom: 63rpx;

  .withdrawalPopup-input-label {
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 34rpx;
    color: #292929;
  }

  .withdrawalPopup-input-item {
    flex: 1;
    min-width: 0;
    margin: 0 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #C2C2C2;
  }

  .withdrawalPopup-input-label-ac {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #C2C2C2;
  }

  .withdrawalPopup-input-btn {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 30rpx;
    color: #23B97F;
  }
}

.withdrawalPopup-list {
  width: 100%;
  .withdrawalPopup-list-item {
    width: 100%;
    height: 112rpx;
    border-radius: 55rpx;
    border: 2px solid #E3E3E3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 28rpx;
    margin-bottom: 41rpx;

    .withdrawalPopup-list-item-l {
      display: flex;
      align-items: center;

      image {
        width: 70rpx;
        height: 70rpx;
        margin-right: 26rpx;
      }

      font-family: PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #292929;
    }

    &>image {
      width: 42rpx;
      height: 42rpx;
    }
  }
}
</style>